<template>
  <div>
    <div v-if="canEdit && !minutes.id" class="empty-block">
      <el-empty description="暂无会议纪要">
        <el-button type="primary" @click="handleEdit">添加会议纪要</el-button>
      </el-empty>
    </div>
    
    <div v-else-if="minutes.id">
      <div class="minutes-header">
        <span>记录人: {{ minutes.creatorName }}</span>
        <span>记录时间: {{ minutes.createTime | formatDateTime }}</span>
        <div v-if="canEdit" class="minutes-actions">
          <el-button type="text" @click="handleEdit">编辑</el-button>
          <el-button type="text" @click="handleDelete">删除</el-button>
        </div>
      </div>
      <div class="minutes-content" v-html="formattedContent"></div>
    </div>
    
    <div v-else class="empty-block">
      <el-empty description="暂无会议纪要"></el-empty>
    </div>
    
    <!-- 编辑对话框 -->
    <el-dialog title="编辑会议纪要" :visible.sync="dialogVisible" width="700px">
      <el-form :model="form" ref="form" :rules="rules" label-width="80px">
        <el-form-item label="内容" prop="content">
          <el-input type="textarea" v-model="form.content" :rows="15" placeholder="请输入会议纪要内容"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getMeetingMinutes, saveMeetingMinutes, deleteMeetingMinutes } from '@/api/meeting/minutes'

export default {
  name: 'MeetingMinutes',
  props: {
    meetingId: {
      type: Number,
      required: true
    },
    meetingStatus: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      loading: false,
      minutes: {},
      dialogVisible: false,
      form: {
        content: ''
      },
      rules: {
        content: [
          { required: true, message: '请输入会议纪要内容', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    canEdit() {
      // 只有会议进行中或已结束的状态才能编辑纪要
      return this.meetingStatus === 1 || this.meetingStatus === 2
    },
    formattedContent() {
      return this.minutes.content ? this.minutes.content.replace(/\n/g, '<br>') : ''
    }
  },
  created() {
    this.getMinutes()
  },
  methods: {
    getMinutes() {
      this.loading = true
      getMeetingMinutes(this.meetingId).then(response => {
        this.minutes = response.data || {}
        this.loading = false
      })
    },
    handleEdit() {
      this.form.content = this.minutes.content || ''
      this.dialogVisible = true
    },
    handleDelete() {
      this.$confirm('确认删除该会议纪要?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteMeetingMinutes(this.minutes.id).then(() => {
          this.$message.success('删除成功')
          this.minutes = {}
        })
      }).catch(() => {})
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const data = {
            meetingId: this.meetingId,
            content: this.form.content
          }
          
          saveMeetingMinutes(data).then(() => {
            this.$message.success('保存成功')
            this.dialogVisible = false
            this.getMinutes()
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.empty-block {
  padding: 30px 0;
  text-align: center;
}
.minutes-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.minutes-header span {
  margin-right: 20px;
  color: #666;
}
.minutes-content {
  line-height: 1.8;
  white-space: pre-line;
}
</style> 